<template>
	<view>
		<!-- 添加紧急联系人页面 -->
		<!-- 	<free-nav-bar showBack title="添加紧急联系人" v-if="isShowFreeBar"></free-nav-bar>
		<free-nav-bar showBack v-else></free-nav-bar> -->
		<view class="px-3">
			<view class="border-bottom list">
				<input type="text" value="" v-model="form.name" placeholder="请输入联系人姓名"
					placeholder-style="font-size:28rpx;color:#CCCCCC;" />
				<text v-if="form.name" @click="form.name=''" class="icon-a-qingkongpng iconfont clear"></text>
			</view>
			<view class="border-bottom list">
				<input type="text" value="" v-model="form.mobile" placeholder="请输入联系人电话"
					placeholder-style="font-size:28rpx;color:#CCCCCC;" />
				<text class="icon-a-qingkongpng iconfont clear" v-if="form.mobile" @click="form.mobile=''"></text>
			</view>
		</view>

		<view style="margin-top: 138rpx;" class="bg-light-muted py-1 text-secondary pl-3">护理行程以短信形式发送至紧急联系人</view>
		<view class="px-3">
			<radio-group name="" @change="checkboxChange" v-if='list.length>0'>
				<view class="border-bottom py33 flex align-center" v-for="(item,index) in list" :key="index">
					<label>
						<radio :id="item.value" :value="item.value" :checked="item.checked" color="#3C8EFF"
							style="transform:scale(0.7);color:#3C8EFF;" />
						<text class="text-primary" style="margin-left: 4rpx;">{{ item.title }}</text>
					</label>
				</view>
			</radio-group>

			<view class="" style="position:fixed;bottom: 84rpx;">
				<!-- 新增 -->
				<template v-if="!isEdit">
					<btn @click="save()" title="保存" style=" box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);">
					</btn>
				</template>
				<!-- 编辑 -->
				<template v-else>
					<!-- 保存按钮 -->
					<btn @click="save()" title="保存"
						style="margin-bottom: 48rpx; box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);"></btn>

					<btn type="info" title="删除" style="box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);"
						@click="del"></btn>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import btn from '@/components/common/btn/btn.vue';
	import {
		validateUsername,
		validatePhone
	} from '@/common/js/validate.js';
	import {
		addUrgencyLinkman,
		deleteUrgencyLinkman
	} from '../../../apis/security/index.js';
	import {
		debounce
	} from '@/common/js/throttle.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					nurseId: this.$store.state.userInfo.id, //护士ID
					type: '', //1 2 3
				},
				isEdit: false, //是否是编辑
				list: [{
					checked: false,
					value: '1',
					title: '每次上门护理时'
				}, {
					checked: false,
					value: '2',
					title: '仅在接夜间单（21:00-6:30)期间'
				}, {
					checked: false,
					value: '3',
					title: '暂时不用'
				}]
			};
		},
		components: {
			btn
		},
		computed: {},
		watch: {},
		onLoad(option) {
			if (option.item) {
				try {
					this.isEdit = true; //编辑
					this.form = JSON.parse(decodeURIComponent(option.item))
					this.form.type = this.form.type
					this.list.filter(el => {
						if (el.value == this.form.type) {
							el.checked = true
						}
					})
				} catch (e) {
					console.log('error-------', e)
					//TODO handle the exception
				}

			}
		},
		methods: {
			checkboxChange(e) {
				this.form.type = Number(e.detail.value)
			},
			// 保存
			save: debounce(async function() {
				if (!this.$store.state.userInfo) {
					uni.showModal({
						confirmColor: '#3c8eff',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../../login-register/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return
				}
				// 验证联系人姓名
				if (validateUsername(this.form.name) && validatePhone(this.form.mobile, 86)) {
					console.log(this.form);
					if (!this.form.type) {
						plus.nativeUI.toast('请选择何时发送短信')
						// uni.showToast({
						// 	title:'请选择何时发送短信',
						// 	icon:'none'
						// })
						return
					}
					let res = await addUrgencyLinkman(this.form)
					console.log('编辑紧急联系人', this.form)
					if (res.success) {
						plus.nativeUI.toast(this.isEdit ? '编辑成功' : '新增成功')
						this.$store.commit('setContactList', true)
						// console.log('2222222222222紧急联系人111111111111', this.$store.state.contactList);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 300)
						// uni.showToast({
						// 	title:this.isEdit?'编辑成功':'新增成功',
						// 	icon:'none',
						// 	success: () => {
						// 		this.$store.commit('setContactList',true)
						// 		setTimeout(()=>{
						// 			uni.navigateBack({
						// 				delta:1
						// 			})
						// 		},300)
						// 	}
						// })
					}
				}
			}, 2000, true),
			del() {
				uni.showModal({
					title: '确认删除该紧急联系人吗？',
					confirmColor: '#FF6A00',
					success: async (res) => {
						if (res.confirm) {
							let res = await deleteUrgencyLinkman({
								id: this.form.id
							})
							if (res.success) {
								plus.nativeUI.toast('删除成功')
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 200)
								// uni.showToast({
								// 	title:'删除成功',
								// 	icon:'none',
								// 	success: () => {
								// 		console.log(12);
								// 		setTimeout(()=>{
								// 			uni.navigateBack({
								// 				delta:1
								// 			})
								// 		})

								// 	}
								// })
							}
						}

					}
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.list {
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			width: 80%;
		}

		.clear {
			margin-right: 40rpx;
			font-size: 48rpx;
		}
	}
</style>